<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-inline{margin-bottom: 10px;}
</style>
<body>
    <div class="x-body">
        <blockquote class="layui-elem-quote">非实时，延迟1分钟左右更新</blockquote>
        <form class="layui-form layui-row" lay-filter="searchForm">
            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">商户单号：</label>
                <div class="layui-input-block">
                    <input type="text" name="order_no" placeholder="请输入商户单号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">用户ID：</label>
                <div class="layui-input-block">
                    <input type="text" name="uid" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">充值金额：</label>
                <div class="layui-input-block">
                    <input type="text" name="total_fee" placeholder="请输入充值金额" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">支付状态：</label>
                <div class="layui-input-block">
                    <select name="status" id="status">
                        <option value="">请选择</option>
                        <option value="0">未支付</option>
                        <option value="1">已支付</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label w-auto">支付时间：</label>
                <div class="layui-input-block" id="time" style="display: flex;align-items: center;">
                    <div class="layui-input-inline" style="margin-right:10px">
                        <input type="text" class="layui-input" name="start_time" id="start_time" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="end_time" id="end_time" placeholder="结束日期">
                    </div>
                </div>
            </div>

            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">下单时间：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="order_time" id="order_time" placeholder="选择时间">
                </div>
            </div>
            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">选择短剧：</label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div>

            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">计划ID：</label>
                <div class="layui-input-block">
                    <input type="text" name="advertiser_id" placeholder="请输入计划ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-md5">
                <label class="layui-form-label w-auto">激活时间：</label>
                <div class="layui-input-inline" id="activation_time" style="display: flex;align-items: center;">
                    <div class="layui-input-inline" style="margin-right:10px">
                        <input type="text" autocomplete="off" name="activation_start_time" id="activation_start_time" class="layui-input"
                            placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="activation_end_time" id="activation_end_time" class="layui-input"
                            placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-inline layui-col-md2" style="margin-left:10px">
                <button class="layui-btn" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <input type="hidden" name="link_id" id="link_id">
        </form>
        
        <table id="order" lay-filter="order"></table>
    </div>
    <script>
        let totalObj = {}
        let link_id = GetQueryString('link_id')
        let params = {
            elem: '#order'
            , toolbar: true
            , url: '/cps/order/list?link_id='+link_id //数据接口
            , id: 'order'
            , page:true
            , totalRow:true
            , cols: [[ //表头
                { field: 'id', title: 'ID', width: 100, sort: true, align:'center',totalRowText: '总合计：' }
                , { field: 'uid', title: '用户ID', align:'center', width: 110 }
                , { field: 'activation_time', title: '激活时间', align:'center' }
                , { field: 'video_name', title: '短剧名称', align:'center' }
                , { field: 'order_no', title: '商户单号', align:'center' }
                // , { field: 'wechat_order_no', title: '微信交易单号', }
                , { field: 'total_fee', title: '金额', align:'center', width: 90 }
                , { title: '状态', templet: function (d) {
                        return d.status == 1 ? '已支付' : '待支付'
                    }, align:'center', width: 90 
                }
                , { field: 'advertiser_id', title: '投放计划ID', align:'center' }
                , {
                    field: 'pay_time', title: '支付时间', templet: function (d) {
                        return dayjsFormat(d.pay_time)
                    }, align:'center'
                }
                , {
                    field: 'created_at', title: '下单时间', templet: function (d) {
                        return dayjsFormat(d.created_at)
                    }, align:'center'
                }
            ]],
            customTotal:function(){
                let that = this;
                layui.use('form', function () {
                    getTotal('/cps/order/linkOrderDetailListSumRecharge',totalObj).then(val=>{
                        totalObj = val
                    })
                });
            },
            done:function(){
                setPrice(totalObj)
            }
        }
        tableList(params)

        
        let selectParams = {
            url:'/cps/video/select',
            selected:[],
            tips:'选择短剧',
            name: 'video_id',
            field_id:'id',
            field_Name:'name',
            elem: '#pMenu'
        }
        selectN(selectParams)

        $('#link_id').val(link_id)

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#order_time'
            });
            laydate.render({
                elem: '#time',
                range:['#start_time','#end_time'],
                format: 'yyyy-MM-dd'
            });
            laydate.render({
                elem: '#activation_time'
                ,type: 'datetime'
                , range: ['#activation_start_time', '#activation_end_time']
                ,format: 'yyyy-MM-dd HH:mm:ss'
            });
        })
        layui.use(['table','form'], function () {
            var table = layui.table;
            var form = layui.form;
            table.on('toolbar(order)', function (obj) {
                var event = obj.event;
                var searchForm = form.val("searchForm");
                if (event === 'total') {
                    LoadAjax(this,'/cps/order/linkOrderDetailListSumRecharge?link_id='+link_id,searchForm,'支付金额')
                } 
            });
            
        });

        function setPrice(totalObj){
            $('.layui-table-total td[data-field="total_fee"] .layui-table-cell').text(totalObj.total_price);
        }
    </script>
</body>

</html>